<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变量提升</title>
</head>

<body>
    <div id="ds" click=funs() style="width: 200px;height: 200px;background-color: aqua;"></div>
    <input type="text" id="inp" value="">
    <div id="jianting" style="width: 100px;height: 100px;background-color:brown;"></div>
    <script>
        // var web = "变量提升"
        // console.log(webs,web)
        // let webs = "webs"
        function funs(e) {
            console.log(e)
        }
        var btn = document.getElementById('ds')
        btn.onclick = function (e) {
            alert('div点击')
        }
        btn.onclick = function (e) {
            alert('div点击二')
            console.log(inp.value.keyCode)
        }


        // 输入框
        var inp = document.getElementById('inp')
        inp.addEventListener('keydown', function (e) {
            console.log(e)
        })
        // inp.onkeydown = function (e) {
        //     console.log(e, e.which, e.keyCode)
        // }
        // 监听
        var jianting = document.getElementById('jianting')
        // jianting.addEventListener('click', function (e) {
        //     alert('监听')
        //     console.log(jianting)
        //     eventHandler(e)
        // })
        // jianting.addEventListener('click', function () {
        //     alert('监听2')
        // })

        // event 事件
        function eventHandler(event) {
            console.log(event, event.pageX)
            event = event || window.event
        }
        /* document.addEventListener('hehe',heheHandler)
        var evt = new Event('hehe')
        document.dispatchEvent(evt)
        function heheHandler(params) {
            console.log('params',params)
        } */
        function eventListener(element, eventName) {
            // 创建事件
            var event = document.createEvent('Event') // 可以创建"UIEvents"（UI事件，用于触摸屏设备）、"MouseEvents"（鼠标事件）、"MutationEvents"（DOM结构发生改变触发的事件）、"HTMLEvents"（HTML事件？机翻英文文档看不懂。。。），在这里得知以前还可以指定类型为"Event"。
            // var event = new Event(eventName)  // 或者通过 new 创建事件
            // 初始化事件
            event.initEvent(eventName, true, true)
            // 给事件添加侦听
            element.addEventListener(eventName, handler)
            // 把侦听抛出
            element.dispatchEvent(event)
            // function handler(){
            //     console.log('监听333')
            // }
        }
        function handler() {
            console.log('监听333')
        }
        // 调用 
        // eventListener(jianting,'click')
    </script>
</body>

</html>